<template>
  <view class="trucks">
    <view style="display: flex;justify-content: space-around;width: 720rpx;margin-top: 15rpx;">
      <text v-if="picker == 100" class="head-nav-picker text-spacing">我的</text>
      <text v-else class="head-nav text-spacing" @click="fitter(100)">我的</text>
      <text v-if="picker == 1" class="head-nav-picker text-spacing">新车</text>
      <text v-else class="head-nav text-spacing" @click="fitter(1)">新车</text>
      <text v-if="picker == 2" class="head-nav-picker">新能源</text>
      <text v-else class="head-nav " @click="fitter(2)">新能源</text>
      <text v-if="picker == 3" class="head-nav-picker">二手车</text>
      <text v-else class="head-nav" @click="fitter(3)">二手车</text>
    </view>
    <view style="display: flex;justify-content: space-between;">
      <view class="search-box">
          <view>
            <icon style="position: relative;top: 13rpx;left: 18rpx;" type="search" size="20"></icon>
          </view>
          <view>
            <input 
              v-model="search" 
              class="search" 
              confirm-type="search" 
              placeholder="输入信息进行查找"
              @confirm="load"
              @input="load"/>
          </view>
      </view>
      <view>
        <image style="width: 40rpx;height: 60rpx;position: relative;right: 20rpx;top: 10rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_3.png"></image>
      </view>
    </view>
    <scroll-view 
      class="truck-main"
      :scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="isRefresh"
      @refresherrefresh="refresh"
      @scrolltolower="loadMore"
      >
      <view 
        v-for="(item,index) in data"
        :key="index"
        @click="showInfo(item.id)"
        class="truck-basic-info">
        <view>
          <image mode="aspectFill" style="width: 350rpx;height: 318rpx;" :src="item.frontPhoto"></image>
        </view>
        <view class="basic-info">
          <view style="line-height: 44rpx;font-size: 32rpx;font-weight: 600;">
            <text>{{item.plateNo}}</text>
            <image v-if="item.status == 0" style="width: 112rpx;height: 30rpx;float: right;margin-top: 8rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragcarfilelogo_1.png"></image>
          </view>
          <view>
            <view style="display: inline-block;width: 240rpx;margin-top: 6rpx;line-height: 22rpx;font-size: 16rpx;overflow: hidden;">
              <view style="white-space: nowrap;">
                {{item.carType}}
              </view>
              <view style="margin-top: 8rpx;white-space: nowrap;">{{item.actualUser}}</view>
            </view>
            <view style="display: inline-block;margin-left: 36rpx;">
              <image style="width: 30rpx;height: 30rpx;margin-top: 16rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo6.png">
              </image>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 10rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
  import {getCarList,getSitemanage} from '@/api/truck'
  import {tokenExpire} from '@/api/token'
  export default {
    data() {
      return {
        picker:100,
        pageSize:10,
        search:'',
        data:[],
        isRefresh:false,
      }
    },
    mounted() {
      this.load();
      // uni.showLoading({
      //   title:'正在加载'
      // })
    },
    methods:{
      load:function() {
        var that = this;
        // console.log(that.search)
        getCarList({pageNum:1,pageSize:that.pageSize,plateNo:that.search}).then(response => {
          var _data = response[1].data;
          if(_data.status == 200) {
            that.data = _data.data;
            that.isRefresh = false;
          }else {
            tokenExpire();
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
            
          }
        })
      },
      refresh:function() {
        this.pageSize = 10;
        this.isRefresh = true;
        this.load();
      },
      fitter:function(key) {
        this.picker = key;
      },
      showInfo:function(id) {
        uni.navigateTo({
          url:'/pages/truck/truck/truck_info?id=' + id
        })
      },
      loadMore:function() {
        if(this.data.length < this.pageSize) {
          return;
        }
        this.pageSize += 10;
        this.load();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .trucks {
  	font-family: PingFangSC-Medium, PingFang SC;
    height: 100%;
    
    .head-nav-picker {
      font-size: 36rpx;
      color: rgba(250, 140, 22, 1);
      font-weight: 600;
      line-height: 44rpx;
      display: inline-block;
      width: 108rpx;
    }
    .head-nav {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 400;
      display: inline-block;
      width: 108rpx;
    }
    .text-spacing {
      letter-spacing: 40rpx;
      white-space: nowrap;
    }
    .search-box {
      background-color: rgba(246, 247, 248, 1);
      height: 60rpx;
      width: 660rpx;
      border-radius: 16rpx;
      margin-left: 16rpx;
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
    }
    .search {
      height: 100%;
      width: 580rpx;
      line-height: 60rpx;
      font-size: 20rpx;
    }
    .truck-main {
      height: 1210rpx;
      .truck-basic-info {
        width: 350rpx;
        height: 460rpx;
        margin: 9rpx 0 9rpx 16rpx;
        border-radius: 18rpx;
        box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.2);
        display: inline-block;
        overflow: hidden;
        .basic-info {
          padding: 16rpx 14rpx 24rpx 18rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }
  
</style>
